/*
 * @Author: Sa 
 * @Date: 2018-09-15 08:39:49 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-09-24 18:29:26
 */
<template>
  <div class="page">
    <el-container>
      <el-header>
         
        <el-tooltip class="item" effect="dark" placement="bottom-start">
          <div slot="content" class="tooltip-content">
            <p> 嘿！你来了 </p>
          </div>
         <div class="theme-color">CampusO2O</div>
        </el-tooltip>

        <div class="about-us">
          <el-tooltip class="item" effect="dark" placement="bottom-start" offset='1000'>
            <div slot="content" class="tooltip-content">
              <p>消费者维权热线 :4006067733</p>
              <p>联系邮箱：1685368363@qq.com</p>
              <p>Copyright © 2018-2019 豆浆油条(个人非正式工作室) </p>
            </div>
            <div class="info">关于我们</div>
          </el-tooltip>
        </div>
        <div class="about-us">加入我们</div>
      </el-header>
    </el-container>


  </div>


</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {}
    },
    components: {}
}
</script>

<style scoped lang="scss">

.el-header {
  background-color: #fff;
  font-size: 26px;
  font-weight: 700;
  text-align: left;
  line-height: 60px;
  padding-left: 25%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

  .el-tooltip {
    float: left;
    overflow: hidden;
  }

  .item {
    margin: 4px;
  }

  .about-us {
    font-size: 15px;
    font-weight: 300;
    color: gray;
    float: right;
    overflow: hidden;
    margin-right: 25px;
    display: block;
    .info{
      margin-top: 1px;
      color: #000
    }
    :hover{
      cursor: pointer;
    }
  }
}
</style>
